<template>
  <div class="content">
    <ul ref="nav" class="moreselect_content">
      <li v-for="(product, index) in products" :class="{cur: index === isSelected }" @click="navClick(index)">{{ product.pname }}</li>
    </ul>
    <div class="example_content">
      <div class="picture_content">
        <p class="product_name">
          形象套餐
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐1
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐2
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐3
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐4
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐5
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐6
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐7
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
      <div class="picture_content">
        <p class="product_name">
          形象套餐8
          <b>Professional Combination</b>
        </p>
        <div class="img_pl">
          <img src="../../assets/img/xingxiang_picture.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'testScorro',
  data() {
    return {
      isSelected: '',
      products: [{
        pname: '形象套餐'
      },{
        pname: '精致证件照'
      },{
        pname: '精致签证照'
      },{
        pname: '结婚照'
      },{
        pname: '职业形象照'
      },{
        pname: '全家福'
      },{
        pname: '文艺照'
      },{
        pname: '宠物照'
      },{
        pname: '企业外拍'
      }]
    }
  },
  methods: {
    // 防抖
    debounce(func, wait, immediate) {
      let timeout, args, context, timestamp, result;
      const later = function () {
        // 据上一次触发时间间隔
        const last = new Date() - timestamp;
        // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
        if (last < wait && last > 0) {
          timeout = setTimeout(later, wait - last);
        } else {
          timeout = null;
          // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
          if (!immediate) {
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          }
        }
      };

      return function () {
        context = this;
        args = arguments;
        timestamp = new Date();
        const callNow = immediate && !timeout;
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
          result = func.apply(context, args);
          context = args = null;
        }

        return result;
      };
    },
    navClick(index) {
      var scrollBox1 = document.querySelector('.example_content')
      var pictureContent = document.querySelector('.picture_content')
      scrollBox1.scrollTo(0, index * pictureContent.clientHeight)
      this.isSelected = index
    }
  },
  mounted() {
    debugger
    this.$nextTick(()=> {
      this.$refs.wrapper
    })
    const self = this;
    const liIds = [];
    const doc = document;

    const $scrollBox = doc.querySelector('.example_content');
    const pictureContent = document.querySelector('.picture_content');
    const scrollCallback = self.debounce(function () {
      const top = $scrollBox.scrollTop; //设置变量top,表示当前滚动条到顶部的值
      const ch = $scrollBox.clientHeight //设置变量top,表示当前滚动条到顶部的值
      const tt = pictureContent.clientHeight ; //设置变量tt,表示当前滚动窗口高度的值
      let num = 0;

        for (let n = 0; n < self.products.length; n++) {
          //在此处通过判断滚动条到顶部的值和当前窗口高度的关系
          //（当前窗口的n倍 <= top <= 当前窗口的n+1倍）来取得和导航索引值的对应关系
          if (top >= n * tt && top <= (n + 1) * tt) {
            num = n;
          }
          self.isSelected = num;
        }
    }, 100);
    $scrollBox.addEventListener('scroll', scrollCallback)

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
  .example_content {
    height: 532px;
    overflow: scroll;
  }

</style>
